<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/static/css/bulma.min.css">
    <script src="/static/js/vue.global.prod.js"></script>
    <script src="/static/js/axios.min.js"></script>
    <title>myproxy</title>
</head>
<body>
<nav class="navbar is-light" id="mynav">
  <div class="navbar-menu">
    <div class="navbar-start">
      <template v-for="myleft in mylefts">
        <a class="navbar-item" :href="myleft.href">{{ myleft.display }}</a>
      </template>
    </div>
    <div class="navbar-end">
      <template v-for="myright in myrights">
        <a class="navbar-item" :href="myright.href">{{ myright.display }}</a>
      </template>
    </div>
  </div>
</nav>
<div id="app" class="columns">
    <div class="column is-8 is-offset-2">
        <div class="field is-grouped">
            <input type="text" class="input" v-model="search" @focus="currentlyActiveField = 'search'" placeholder="search" style="width: 150px;">
            <a class='button' @click="add()" href="#">添加记录</a>
        </div>
        <table class="table is-bordered">
            <thead>
                <th>name</th>
                <th>address</th>
            </thead>
            <tbody id="content">
                <template v-for="oneresult in results">
                <tr>
                    <td>
                        <a @click="info(oneresult.id)" href="#">{{oneresult.name}}</a>
                    </td>
                    <td>{{oneresult.address}}</td>
                </tr>
                </template>
            </tbody>
        </table>
        <p>
            <p style='display: inline;'>当前页：{{ pagenow }} 总记录数：{{allcount}}</p>
            <button :disabled="pagenow == 1" @click="shangyiye" class="button">Previous</button>
            <button :disabled="pagenow == Math.ceil(allcount/pagesize)" @click="xiayiye" class="button">Next</button>
        </p>
    </div>
</div>
<script src="/static/js/thesame.js"></script>
<script>
const app = {
  data() {
    return {
      results : '',
      pagenow: 1,
      pagesize: 12,
      allcount: '',
      search: ''
    }
  },
  watch : {
      search:function(newValue, oldValue) {
        this.pagenow = 1;
        this.get_page(this.pagenow,this.pagesize,this.search);
      }
  },
  methods: {
    info(id){
        window.location.href = "/static/myproxy/info.html?id="+id+"="+new Date().getTime()
    },
    add(){
        window.location.href = "/static/myproxy/add.html?"+new Date().getTime()
    },
    shangyiye(){
        this.pagenow=this.pagenow-1
        this.get_page(this.pagenow,this.pagesize,this.search);
    },
    xiayiye(){
        this.pagenow=this.pagenow+1
        this.get_page(this.pagenow,this.pagesize,this.search);
    },
    get_page(pagenow, pagesize, search) {
        info = { "pagenow": pagenow, "pagesize": pagesize, "search": search }
        axios({
          method:'post',
          data: JSON.stringify(info),
          url:'/myproxy/GetByPage',
          async:false
        })
        .then(response => {
            mydata = response.data;
            this.results = mydata['result'];
            this.allcount = mydata['allcount'];
        })
    },
  },
  mounted () {
    this.get_page(this.pagenow,this.pagesize,this.search);
  }
}

Vue.createApp(app).mount('#app')
</script>
</body>
</html>